<html>

<head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>OR Media Anesthesia Module</title>
    <!-- <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/chart.js@2.9.3/dist/Chart.bundle.js"></script> -->
    <!-- <script src="https://code.jquery.com/jquery-3.4.1.min.js"
        integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script> -->
    <script crossorigin="anonymous" integrity="sha384-LVoNJ6yst/aLxKvxwp6s2GAabqPczfWh6xzm38S/YtjUyZ+3aTKOnD/OJVGYLZDl"
        src="https://lib.baomitu.com/jquery/3.5.0/jquery.min.js"></script>
    <!-- <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/chart.js@2.9.3/dist/Chart.css"> -->
    </link>
    <link rel="stylesheet" href="../w3.css">
    <!-- 引入 echarts.js -->
    <script src="https://cdn.jsdelivr.net/npm/echarts@4.9.0/dist/echarts.min.js"></script>

    <!-- <link href="<?php bloginfo('template_directory'); ?>/assets/css/vendor/fontawesome-5.14.0/css/all.min.css" rel="stylesheet"> -->
    <style type="text/css">
        body,
        html {
            width: 100%;
            height: 100%;
            background-color: #555;
            position: absolute;
            margin: 0;
            padding: 0;
        }

        .content {
            box-sizing: border-box;
            min-width: 1200px;
            margin: 20px;
            padding: 0.5cm;
            color: white;
            background-color: #111;
        }

        tr td {
            border-bottom: #333;
        }

        .yellow {
            color: #ffD700;
        }

        table.tdpad td {
            padding: 10px;
        }

        table {
            color: white;
        }

        .formtitle {
            font-size: 20px;
            font-weight: bold
        }

        .underline {
            text-decoration: underline;
        }

        .textpad {
            padding-left: 10px;
            padding-right: 10px;
        }

        .w3-bold {
            font-weight: bold;
        }

        .verticaltext {
            writing-mode: vertical-rl;
            text-orientation: upright;
        }

        .redslot {
            border: solid red 2px;
            border-radius: 10px;
            background-color: rgba(255, 0, 0, 0.3);
            color: white;
            font-weight: bold;
            text-align: center;
            line-height: 20px;
            padding-top: 4px;
            padding-bottom: 4px;
        }

        table.tdborder td {
            border: 1px solid #666;
        }

        .w3-input {
            height: 22px;
        }
    </style>

</head>

<body>
    <div class="content">
        <div class="w3-text-white" style="padding-top:10px; font-size:20px;padding-bottom:10px">Anesthesia Info Module
        </div>
        <table width="100%">
            <tr rel="data-fentayl">
                <td class="yellow">Fentanyl</td>
                <td>450</td>
                <td class="yellow">ug</td>
                <td><span style="padding-right:100px">100</span>100<span style="padding-left:30px">100</span><span
                        style="padding-left:100px">100</span></td>
            </tr>
            <tr rel="data-fentayl">
                <td class="yellow">Rocuronium</td>
                <td>300</td>
                <td class="yellow">mg</td>
                <td>200</td>
            </tr>
            <tr rel="data-fentayl">
                <td class="yellow">Propoful</td>
                <td>100</td>
                <td class="yellow">mg</td>
                <td>
                    <div id=""></div>
                </td>
            </tr>
            <tr rel="data-fentayl">
                <td class="yellow">Isofluorine</td>
                <td></td>
                <td class="yellow">%</td>
                <td>
                    <div id=""></div>
                </td>
            </tr>
            <tr rel="data-fentayl">
                <td class="yellow">O<sub>2</sub></td>
                <td>1100.25</td>
                <td class="yellow">L</td>
                <td>
                    <div id=""></div>
                </td>
            </tr>
            <tr rel="data-fentayl">
                <td class="yellow">Air</td>
                <td>540</td>
                <td class="yellow">L</td>
                <td>
                    <div id=""></div>
                </td>
            </tr>
            <tr>
                <td colspan="2"></td>
                <td></td>
            </tr>
            <tr>
                <td colspan="2">
                    <div class="redslot larget">
                        <div class="title">Arterial</div>
                        <div class="data">130/67 102</div>
                    </div>
                    <div class="redslot">
                        <div class="title">HR</div>
                        <div class="data">63</div>
                    </div>
                    <div class="redslot">
                        <div class="title">BP</div>
                        <div class="data">81</div>
                    </div>
                    <div class="redslot">
                        <div class="title">EtCO<sub>2</sub></div>
                        <div class="data">30.8</div>
                    </div>
                    <div class="redslot">
                        <div class="title">SpO<sub>2</sub></div>
                        <div class="data">91.6</div>
                    </div>
                    <div class="redslot">
                        <div class="title">RR</div>
                        <div class="data">13</div>
                    </div>
                    <div class="redslot">
                        <div class="title">FiO<sub>2</sub></div>
                        <div class="data">81</div>
                    </div>
                    <div class="redslot">
                        <div class="title">TV</div>
                        <div class="data">540</div>
                    </div>
                    <div class="redslot">
                        <div class="title">Tgen</div>
                        <div class="data">96.8</div>
                    </div>
                </td>
                <td colspan="2">
                    <!-- <canvas id="sysChart"></canvas> -->
                    <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
                    <div id="main" style="width: 100%;height:500px"></div>
                </td>
            </tr>
        </table>
    </div>
    <script type="text/javascript">
        //页头时间
        var now = new Date();

        var pageTimeSpan = $('#pageTime');

        setInterval(function () {
            var hour = now.getHours().toString().padStart(2, "0");
            var minute = now.getMinutes().toString().padStart(2, "0");
            var second = now.getSeconds().toString().padStart(2, "0");
            var timeText = hour + ':' + minute + ':' + second
            pageTimeSpan.text(timeText);
        }, 1000);
    </script>


    <script type="text/javascript">
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'), 'dark');


        // 指定图表的配置项和数据
        // var option = {
        //     title: {
        //         text: 'ECharts 入门示例'
        //     },
        //     tooltip: {},
        //     legend: {
        //         data:['销量']
        //     },
        //     xAxis: {
        //         data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
        //     },
        //     yAxis: {},
        //     series: [{
        //         name: '销量',
        //         type: 'line', //'bar',
        //         data: [5, 20, 36, 10, 10, 20]
        //     }]
        // };

        var dataArr = [];
        // var dataArr2 = [];
        var now = +new Date(); //+new Date(1997, 9, 3);
        var oneDay = 1 * 1000; //24 * 3600 * 1000;
        var value = Math.random() * 37;
        // var value2 = Math.random() * 100;

        var date = [];
        for (var i = 0; i < 50; i++) {
            dataArr.push(randomData());
            // dataArr2.push(randomData());
        }


        var TempFooter = $('#Temp');
        var bloodFooter = $('#blood');

        function randomData() {
            now = new Date(+now + oneDay);
            value = value + Math.random() * 21 - 10;

            date.push(now);

            return {
                name: now.toString(),
                value: [
                    [now.getFullYear(), now.getMonth() + 1, now.getDate(), now.getHours(), now.getMinutes(), now.getSeconds()].join('/'),//[now.getFullYear(), now.getMonth() + 1, now.getDate()].join('/'),
                    Math.round(value)
                ]
            };
        }

        function ajaxRandomData() {
            now = new Date(+now + oneDay);
            value = value + Math.random() * 21 - 10;
            var hour = now.getHours().toString().padStart(2, "0");
            var minute = now.getMinutes().toString().padStart(2, "0");
            var second = now.getSeconds().toString().padStart(2, "0");

            // return {
            //     name: now.toString(),
            //     value: [
            //         [now.getFullYear(), now.getMonth() + 1, now.getDate()].join('/'),
            //         Math.round(value)
            //     ]
            // };
            $.ajax({
                type: "POST",
                url: 'http://127.0.0.1/wp/backend_server/?c=Test&a=echartsTestData2',//"http://localhost/wordpress/aiserver/?c=Monitor&a=bloodPressureData",
                timeout: '4000',

                data: {
                    'debugmod': 3,
                    'namestr': hour + ':' + minute + ':' + second, //now.toString(),
                    'value1': [now.getFullYear(), now.getMonth() + 1, now.getDate()].join('/') + ' ' + hour + ':' + minute + ':' + second,
                    'value2': Math.round(value),
                },//在请求之前调用的函数
                beforeSend: function () {
                    // $('#infoModalMsg').html("處理中");
                    // $('#info-alert-modal').modal('show');

                }
                ,
                success: function (data, status) {

                    // console.log(data);
                    var obj3 = JSON.parse(data); //由json字符串转换为json对象
                    // console.log(obj3.msg);
                    // console.log(obj3.value1);
                    if (obj3.rc == 0) {
                        myChart.hideLoading();
                        // $('#successmodalmsg').html(obj3.msg);
                        //
                        // setTimeout(function () {
                        //     $('#info-alert-modal').modal('hide');
                        //
                        //     $('#success-alert-modal').modal('show');
                        // }, 1000);

                        var ajaxData = {
                            name: obj3.namestr,
                            value: [obj3.value1, obj3.value2],
                        };
                        dataArr.push(ajaxData);


                        date.push(obj3.value1);

                        myChart.setOption({
                            xAxis: {
                                data: date
                            },
                            series: [{
                                data: dataArr
                            },{
                                data: dataArr
                            }]
                        });
                        TempFooter.text(obj3.value2);

                        dataArr.shift();
                        date.shift();
                        // console.log(dataArr);
                    } else {
                        $('#dangermodalmsg').html(obj3.msg);

                        setTimeout(function () {
                            $('#info-alert-modal').modal('hide');

                            $('#danger-alert-modal').modal('show');
                        }, 1000);

                    }

                }
                ,
                error: function (XMLHttpRequest, status) { //请求完成后最终执行参数
                    if (status == 'timeout') {//超时,status还有success,error等值的情况
                        // ajaxTimeoutTest.abort();
                        // alert("超时");

                        $('#dangermodalmsg').html("請求超時，請重新提交");

                        setTimeout(function () {
                            $('#info-alert-modal').modal('hide');

                            $('#danger-alert-modal').modal('show');
                        }, 1000);
                    }

                }
                ,
                always: function (status) {
                    // $('#infoModalMsg').html("處理中");
                    // $('#info-alert-modal').modal('show');
                }
                ,
                complete: function (status) {
                    // $('#info-alert-modal').modal('hide');
                    // $('#info-alert-modal').hidden;
                }
            });


        }

        option = {
            backgroundColor: '#111',
            // title: {
            //     text: 'Blood Pressure (in mmHg)'
            // },
            tooltip: {
                trigger: 'axis',
                formatter: function (params) {
                    params = params[0];
                    // var date = new Date(params.name);
                    // return date.getDate() + '/' + (date.getMonth() + 1) + '/' + date.getFullYear() + ' : ' + params.value[1];
                    return params.value[0] + ' : ' + params.value[1];
                },
                axisPointer: {
                    animation: false
                }
            },
            xAxis: {

                type: 'time',
                splitLine: {
                    show: true
                },
                data: date,
                position: 'top',
                axisLabel:{
                    interval:0,//横轴信息全部显示
                    rotate:-30,//-30度角显示，
                    color:' #ffD700',
                },
                axisLine:{
                    lineStyle:{
                        color:'#0087ED',
                    }
                }
            },
            yAxis: {
                type: 'value',
                boundaryGap: [0, '10%'],
                splitLine: {
                    show: false
                },
                axisLabel: {
                    formatter: '{value} mmHg'
                },
                max: 230,
                min: 50,
            },

            series: [{

                name: '模拟数据',
                type: 'line',
                lineStyle: {
                    color: '#f59d52',
                    // width: 5
                },
                showSymbol: false,
                hoverAnimation: false,
                smooth: true,
                data: dataArr
            }]
        };



        setInterval(function () {
            ajaxRandomData();
        }, 1000);

        // 使用刚指定的配置项和数据显示图表。
        myChart.showLoading();
        myChart.setOption(option);

    </script>
</body>

</html>